﻿<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div id="overview-mapmain">
    <div class="overview-mode-pannel" v-loading="mapLoad"> 
      <el-amap vid="overview-amap" ref="map" resizeEnable='true' :plugin="plugin" :amap-manager="amapManager"
        :center="center" :zoom="zoom" :events="events" class="mapset">
        <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :vid="index"
          :events="marker.events">
          <div class="map-marker-wrapn">
            <!-- <div class="main-map-markern"
              :class="{'main-map-marker__abnormaln': marker.status=='离线', 'main-map-marker__notify': marker.status=='报警'}">
            </div> -->
            <div class="hymain-map-marker"
              :class="{'hymain-map-marker__abnormal': marker.status=='离线', 'hymain-map-marker__normal': marker.status=='报警','hymain-map-marker__yel':marker.status=='故障','hymain-map-marker__green':marker.status=='正常'}">
              <icon-svg v-show="marker.type=='2'" icon-class="xiaofangshuan" style="fill:#ffffff" />
            </div>
            <p class="bubble">
              <i class="build-name">{{marker.name}}</i>
              <i class="arrow-up"></i>
            </p>
          </div>
        </el-amap-marker>
      </el-amap>
    </div>
    <!--左侧可展开窗体-->
    <div class="left-plan-pannel" :class="{'plan-pannel-close':isClosed}"
      style="margin-top: 76px;height: calc( 100% - 80px)"> 
      <el-scrollbar style="height: 100%;">
        <div class="overflow-left-status">
          <div class="overflow-left-boxone line-with-verticl">
            <div class="over-topline line-with-verticl"></div>
            <h3 class="overflow-common-title"><i class="title-before-dot"></i>设备实时状态</h3>
            <div class="overflow-status-wrap">
              <div class="overflow-status-item">
                <div class="title">报警</div>
                <div class="count" style="color:rgba(255, 58, 10, 0.85)">{{realstatusCount.callCount}}</div>
              </div>
              <div class="overflow-status-item">
                <div class="title">故障</div>
                <div class="count" style="color: #F5A623">{{realstatusCount.faultCount}}</div>
              </div>
              <div class="overflow-status-item">
                <div class="title">离线</div>
                <div class="count" style="color: rgba(155, 155, 155, 1)">{{realstatusCount.offCount}}</div>
              </div>
              <div class="overflow-status-item">
                <div class="title">正常</div>
                <div class="count" style="color: #50E3C2">{{realstatusCount.normalCount}}</div>
              </div>
            </div>
          </div>
          <div class="overview-wrap">
            <div class="wrap-with-halfboder"></div>
            <div class="overflow-left-boxtwo">
              <h3 class="overflow-common-title"><i class="title-before-dot"></i>近7天隐患处理情况</h3>
              <div class="overflow-piechart" id="piechart">
              </div>
            </div>
            <div class="overflow-left-boxthree">
              <h3 class="overflow-common-title"><i class="title-before-dot"></i>近7天报警发生情况</h3>
              <div class="overflow-linechart alarmchart" id="alarmchart">
              </div>
            </div>
            <div class="overflow-left-boxfour">
              <h3 class="overflow-common-title"><i class="title-before-dot"></i>近7天故障发生情况</h3>
              <div class="overflow-linechart breakchart" id="breakchart">
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <!--右侧地图说明-->
  </div>
</template>
<script>
import {
  getAllCount,
  getPiechart,
  getalram,
  getabnormal,
  getMapData,
  getAllBuildingStatus
} from "@/api/overview/index";
import { AMapManager } from "vue-amap";
import echarts from "echarts"
let amapManager = new AMapManager();
export default {
  data () {
    let self = this;
    return {
      amapManager: amapManager,
      center: [114.42377, 30.50469],
      zoom: 5,
      isClosed: false,
      realstatusCount: {},
      piechardt: {},
      markers: [],
      markerRefs: [],
      mapLoad: true,
      // slotStyle:{
      //   width:'40px',
      //   borderRadius:'50%',
      //   lineHeight:'40px',
      //   textAlign:'center',
      //   color:'#fff',
      //   background:'rgb(244, 233, 37,.6)',
      // },
      plugin: [
        {
          pName: "CitySearch",
          // showMarker:false,
          events: {
            init (o) { }
          }
        },
        {
          pName: "Scale",
          events: {}
        }
      ],
      events: {
        init: o => {
          o.setMapStyle('amap://styles/117f36d1e643cfd46d21660d866df29e');
          // 点聚合功能
          setTimeout(() => {
            let cluster = new AMap.MarkerClusterer(o, self.markerRefs, {
              gridSize: 80,
              minClusterSize: 2,
              maxZoom: 17,
              renderCluserMarker: self._renderCluserMarker
            });
            self.mapLoad = false;
          }, 2000);
        }
      }
    }
  },
  mounted () {
    let mapmainHeight = document
      .querySelector(".sidebar-container")
      .getBoundingClientRect().height;
    document.querySelector("#overview-mapmain").style.height = mapmainHeight + "px";
    //图表加载
    this.getPiechartData();
    this.getAlarmdata();
    this.getAbnormaldata();
  },
  created () {
    //修复高德地图加载的bug
    if (localStorage.getItem('logined')) {
      let addStorage = localStorage.getItem('logined');
      this.clearMapstore()
      localStorage.setItem('logined', addStorage);
    } else {
      this.clearMapstore()
    }
    this.getStatusCount();
    // this.getMapCluster();
    this.getBuildingStatus();
  },
  methods: {
    // 获取所有建筑物状态
    getBuildingStatus () {
      let self = this;
      getAllBuildingStatus().then(res => {
        if (res.status === 200) {
          let markers = [];
          this.markers = res.data;
          for (let i = 0; i < this.markers.length; i++) {
            /* switch (Number(this.markers[i].type)) {
              case 1:
                this.markers[i].type = '建筑物'
                break;
              case 2:
                this.markers[i].type = '消火栓'
                break;
              default:
                break;
            } */
            markers.push({
              position: [Number(this.markers[i].gis.split(",")[0]), Number(this.markers[i].gis.split(",")[1])],
              id: this.markers[i].id,
              status: this.markers[i].status,
              type: this.markers[i].type,
              name: this.markers[i].name,
              events: {
                init (o) {
                  self.markerRefs.push(o);
                }
              }
            });
          }
          this.markers = [];
          this.markers = markers;
        }
      })
    },
    // 获取地图数据
    getMapCluster () {
      let self = this;
      let markers = [];

      getMapData().then(res => {
        let clsdata = res.data;
        for (let i = 0; i < clsdata.length; i++) {
          markers.push({
            position: [Number(clsdata[i].gis.split(",")[0]), Number(clsdata[i].gis.split(",")[1])],
            content: '<div class="circelanimate" style="text-align:center; color:hsl(0, 0%, 100%); line-height:40px; background-color: hsla(32, 100%, 41%, 0.7); height: 40px; width: 40px; border: 1px solid hsl(32, 100%, 41%); border-radius: 20px; box-shadow: hsl(180, 100%, 98%) 0px 0px 1px;">' + clsdata[i].count + '</div>',
            count: clsdata[i].count,
            events: {
              init (o) {
                self.markerRefs.push(o);
              }
            }
          });
        }
        this.markers = markers;

      })
    },
    /* _renderCluserMarker (context) {
      const count = this.markers.length;

      let factor = Math.pow(context.count / count, 1 / 18)
      let div = document.createElement('div');
      let Hue = 180 - factor * 180;
      let bgColor = 'hsla(53, 100%, 41%, 0.7)';
      //let bgColor = 'hsla('+Hue+',100%,50%,0.7)';
      let fontColor = 'hsla(0,0%,100%,1)';
      let borderColor = 'hsla(53, 100%, 41%, 1)';
      let shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
      div.style.backgroundColor = bgColor
      let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
      div.style.width = div.style.height = size + 'px';
      div.style.border = 'solid 1px ' + borderColor;
      div.style.borderRadius = size / 2 + 'px';
      div.style.boxShadow = '0 0 1px ' + shadowColor;
      // div.innerHTML = context.count;
      div.innerHTML = '';
      div.style.lineHeight = size + 'px';
      div.style.color = fontColor;
      div.style.fontSize = '14px';
      div.style.textAlign = 'center';
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
      context.marker.setContent(div)
    }, */
    _renderCluserMarker (context) {
      // 点聚合方法
      const count = this.markers.length;

      let factor = Math.pow(context.count / count, 1 / 18);
      let div = document.createElement('div');
      let Hue = 180 - factor * 180;
      // let bgColor = 'hsla('+Hue+',100%,50%,0.7)';
      // let fontColor = 'hsla('+Hue+',100%,20%,1)';
      // let borderColor = 'hsla('+Hue+',100%,40%,1)';
      // let shadowColor = 'hsla('+Hue+',100%,50%,1)';
      let bgColor = 'hsla(153,100%,33%,0.7)';
      let fontColor = 'hsla(0,0%,100%,1)';
      let borderColor = 'hsla(153,100%,40%,1)';
      let shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
      div.style.backgroundColor = bgColor
      let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
      div.style.width = div.style.height = size + 'px';
      div.style.border = 'solid 1px ' + borderColor;
      div.style.borderRadius = size / 2 + 'px';
      div.style.boxShadow = '0 0 1px ' + shadowColor;
      div.innerHTML = context.count;
      div.style.lineHeight = size + 'px';
      div.style.color = fontColor;
      div.style.fontSize = '14px';
      div.style.textAlign = 'center';
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
      context.marker.setContent(div)
    },
    getStatusCount () {
      getAllCount().then(res => {
        this.realstatusCount = res.data;
      })
    },
    getPiechartData () {
      getPiechart().then(res => {
        this.piechardt = res.data;
        this.pieChart();
      })
    },
    getAlarmdata () {
      getalram().then(res => {
        this.alarmchart('alarmchart', res.data);
      })
    },
    getAbnormaldata () {
      getabnormal().then(res => {
        this.alarmchart('breakchart', res.data);
      })
    },
    toggleClose () {
      //切换展开
      this.isClosed = !this.isClosed;
    },
    pieChart () {
      let piechardt = this.piechardt;
      let ayarr = [{ value: piechardt.count, name: '未处理' },
      { value: piechardt.handleCount, name: '已处理' }];
      let stringarr = ['未处理', '已处理'];

      let chart = echarts.init(document.getElementById('piechart'));
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: "{b} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          right: '30',
          top: 'center',
          data: stringarr,
          icon: "circle",
          color: ['#FF5B60', '#50E3C2'],
          textStyle: {
            color: '#50E3C2'
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['42%', '70%'],
            center: ['40%', '50%'],
            data: ayarr,
            color: ['#FF5B60', '#50E3C2'],
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              }
            }
          },
          {
            type: 'pie',
            radius: ['42%', '70%'],
            center: ['40%', '50%'],
            data: ayarr,
            color: ['#FF5B60', '#50E3C2'],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'inner',
                  formatter: '{c}',
                  textStyle: {
                    color: '#ffffff'
                  }
                },
                labelLine: {
                  show: false   //隐藏标示线
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
            }
          }
        ]
      };
      chart.setOption(option);
    },
    alarmchart (el, data) {
      let chart = echarts.init(document.getElementById(el));
      let option = {
        grid: {
          left: 60,
          right: 40,
          bottom: 20,
          top: 20
        },
        textStyle: {//全局字体样式
          color: 'rgba(80, 227, 194, 0.7)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#50E3C2'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100
          },
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: data.dateList,
            axisLine: {
              lineStyle: {
                color: "transparent"
              }
            }
          }
        ],
        yAxis: [
          {
            name: '',
            type: 'value',
            axisLine: {
              lineStyle: {
                color: "transparent"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(80, 227, 194, 0.7)'
              }
            }
          }
        ],
        series: [
          {
            name: "",
            type: 'line',
            showAllSymbol: true,
            sampling: 'average',
            itemStyle: {
              normal: {
                color: '#ffffff',
                lineStyle: {
                  color: '#26DAD0'
                }
              }
            },
            data: data.countList
          }
        ]
      };
      chart.setOption(option);
    },
  },
}
</script>
<style lang="scss">
@keyframes warn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(0);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.circelanimate {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    left: -60px;
    top: -60px;
    border: 80px solid #d26f00;
    border-radius: 80px;
    z-index: 1;
    opacity: 0;
    animation: warn 3s ease-out;
    animation-iteration-count: infinite;
  }
}
.left-plan-pannel {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  width: 410px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0px);
  transition: all 0.3s;
  .plan-close-btn {
    z-index: 9;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: -4px;
    width: 22px;
    height: 0;
    border-top: 14px solid #a4cdff;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transform: rotate(90deg);
    .el-icon-arrow-left {
      color: #2683f5;
      transform: rotate(-90deg) translateX(15px);
    }
  }
  &.plan-pannel-close {
    transform: translateX(-410px);
    transition: all 0.3s;
    .plan-close-btn {
      transform: rotate(-90deg) translateY(15px);
    }
  }
  .overflow-left-status {
    width: 370px;
    margin: 0 auto;
  }
  .overflow-common-title {
    line-height: 25px;
    font-weight: normal;
    color: #50e3c2;
    font-family: PingFangSC-Semibold;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
    .title-before-dot {
      font-size: 0;
      vertical-align: text-top;
      width: 0;
      height: 0;
      border: 8px solid rgba(80, 227, 194, 0.6);
      border-color: transparent transparent transparent rgba(80, 227, 194, 0.6);
      margin-right: 6px;
      margin-left: 12px;
    }
  }
  .overview-wrap {
    background: linear-gradient(-140deg, transparent 2em, rgba(0, 0, 0, 0.5) 0);
    padding: 10px 10px;
    margin-top: 20px;
    position: relative;
  }
  .overflow-left-boxone {
    border-bottom: 1px solid rgba(80, 227, 194, 0.7);
    .over-topline {
      border-bottom: 1px solid rgba(80, 227, 194, 0.7);
      margin-top: 4px;
    }
  }
  .overflow-left-boxthree {
    padding-bottom: 20px;
  }
}
$bgcolor: rgba(0, 0, 0, 0.6); //背景色
$textcolor: #fff; //字体色
#overview-mapmain {
  overflow: hidden;
  position: relative;
  width: 100%;
  .overview-mode-pannel {
    width: 100%;
    height: 100%;
    &.map-pannel-show {
      display: block;
    }
  }
  .overview-mode-pannel {
    width: 100%;
    .overview-mapset {
      width: 100%;
      height: 100%;
    }
  }
  .overflow-piechart {
    width: 100%;
    height: 160px;
  }
  .overflow-linechart {
    height: 170px;
  }
  .overflow-status-wrap {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    color: rgba(80, 227, 194, 0.6);
    font-family: PingFangSC-Medium;
    .overflow-status-item {
      text-align: center;
      flex: 1;
      .title {
        font-size: 14px;
        padding-bottom: 5px;
      }
      .count {
        font-size: 40px;
        font-family: "digital";
        text-shadow: 0px 0px 5px currentColor;
      }
    }
  }
  // 不同状态颜色样式调整
  .map-marker-wrapn {
    .bubble {
      margin-top: -50px;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      .build-name {
        display: inline-block;
        white-space: nowrap;
        font-style: normal;
        color: #fff;
        padding: 5px 10px;
        background-color: #00a75b;
        border-radius: 2px;
        border: 1px solid #00a75b;
        min-width: 40px;
        font-size: 12px;
      }
      .arrow-up {
        border: 4px solid transparent;
        border-top-width: 4px;
        border-top-color: #00a75b;
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
      }
    }
    .main-map-markern {
      display: inline-block;
      width: 44px;
      height: 44px;
      color: transparent;
      font-size: 20px;
      text-align: center;
      line-height: 44px;
      position: relative;
      &.main-map-marker__notify {
        background: url("../../../assets/default-images/warning.png") no-repeat;
        color: #fff;
      }
      &.main-map-marker__abnormaln {
        background: url("../../../assets/default-images/abnormal.png") no-repeat;
        color: #fff;
      }
    }
    // 离线/报警/正常/故障图标颜色
    .hymain-map-marker {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #fff;
      position: relative;
      text-align: center;
      vertical-align: middle;
      .svg-icon {
        position: relative;
        top: 2px;
      }
      // 离线
      &.hymain-map-marker__abnormal {
        color: #90a1ab;
        background: #90a1ab;
      }
      // 报警
      &.hymain-map-marker__normal {
        color: #ff4545;
        background: #ff4545;
      }
      // 正常
      &.hymain-map-marker__green {
        color: #2ad797;
        background: #2ad797;
      }
      // 故障
      &.hymain-map-marker__yel {
        color: #2ad797;
        background: #ffaa00;
      }
      // 扩散动画
      &::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        left: -22px;
        top: -22px;
        border: 30px solid currentColor;
        border-radius: 30px;
        z-index: 1;
        opacity: 0;
        animation: warn 3s ease-out;
        animation-iteration-count: infinite;
      }
    }
  }
}
</style>
